<!DOCTYPE html>
<html>
<body>
<canvas id="circuitCanvas" width="400" height="350" style="border:1px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById('circuitCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.lineWidth = 1.5;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.textBaseline = 'middle';

    // Helper function to draw a capacitor symbol
    function drawCapacitor(x, y_top, plateWidth, plateGap) {
        // Top plate
        ctx.beginPath();
        ctx.moveTo(x - plateWidth / 2, y_top);
        ctx.lineTo(x + plateWidth / 2, y_top);
        ctx.stroke();
        // Bottom plate
        ctx.beginPath();
        ctx.moveTo(x - plateWidth / 2, y_top + plateGap);
        ctx.lineTo(x + plateWidth / 2, y_top + plateGap);
        ctx.stroke();
    }

    // --- Define coordinates ---
    const x_A = 80;
    const y_A = 80;
    const x_B = 80;
    const y_B = 280;

    const x_C1 = 160;
    const x_C2 = 280;
    const y_top_rail = 80;

    const y_C1C2_plates_top = 110;
    const plate_gap = 12;
    const y_C1C2_plates_bottom = y_C1C2_plates_top + plate_gap;
    const y_mid_rail = 170;

    const x_C3 = (x_C1 + x_C2) / 2; // 220
    const y_C3_plates_top = 200;
    const y_C3_plates_bottom = y_C3_plates_top + plate_gap;

    const cap_plate_width = 50;

    // --- Draw Terminals ---
    ctx.font = '20px Times New Roman';
    ctx.textAlign = 'center';
    // Terminal A
    ctx.fillText('A', x_A - 20, y_A);
    ctx.beginPath();
    ctx.arc(x_A, y_A, 5, 0, 2 * Math.PI);
    ctx.stroke();
    // Terminal B
    ctx.fillText('B', x_B - 20, y_B);
    ctx.beginPath();
    ctx.arc(x_B, y_B, 5, 0, 2 * Math.PI);
    ctx.stroke();

    // --- Draw Wires ---
    ctx.beginPath();
    // Top wires
    ctx.moveTo(x_A, y_top_rail);
    ctx.lineTo(x_C2, y_top_rail);
    // C1 vertical wires
    ctx.moveTo(x_C1, y_top_rail);
    ctx.lineTo(x_C1, y_C1C2_plates_top);
    ctx.moveTo(x_C1, y_C1C2_plates_bottom);
    ctx.lineTo(x_C1, y_mid_rail);
    // C2 vertical wires
    ctx.moveTo(x_C2, y_top_rail);
    ctx.lineTo(x_C2, y_C1C2_plates_top);
    ctx.moveTo(x_C2, y_C1C2_plates_bottom);
    ctx.lineTo(x_C2, y_mid_rail);
    // Middle rail
    ctx.moveTo(x_C1, y_mid_rail);
    ctx.lineTo(x_C2, y_mid_rail);
    // C3 vertical wires
    ctx.moveTo(x_C3, y_mid_rail);
    ctx.lineTo(x_C3, y_C3_plates_top);
    ctx.moveTo(x_C3, y_C3_plates_bottom);
    ctx.lineTo(x_C3, y_B);
    // Bottom wire to B
    ctx.moveTo(x_C3, y_B);
    ctx.lineTo(x_B, y_B);
    ctx.stroke();

    // --- Draw Capacitors ---
    drawCapacitor(x_C1, y_C1C2_plates_top, cap_plate_width, plate_gap);
    drawCapacitor(x_C2, y_C1C2_plates_top, cap_plate_width, plate_gap);
    drawCapacitor(x_C3, y_C3_plates_top, cap_plate_width, plate_gap);

    // --- Draw Labels ---
    // C1
    ctx.font = 'italic 20px Times New Roman';
    ctx.textAlign = 'left';
    ctx.fillText('C', x_C1 - 60, y_C1C2_plates_top + plate_gap / 2);
    ctx.font = 'italic 14px Times New Roman';
    ctx.fillText('1', x_C1 - 48, y_C1C2_plates_top + plate_gap / 2 + 5);

    // C2
    ctx.font = 'italic 20px Times New Roman';
    ctx.textAlign = 'center';
    ctx.fillText('C', x_C3, y_C1C2_plates_top + plate_gap / 2);
    ctx.font = 'italic 14px Times New Roman';
    ctx.fillText('2', x_C3 + 12, y_C1C2_plates_top + plate_gap / 2 + 5);

    // C3
    ctx.font = 'italic 20px Times New Roman';
    ctx.textAlign = 'left';
    ctx.fillText('C', x_C3 - 60, y_C3_plates_top + plate_gap / 2);
    ctx.font = 'italic 14px Times New Roman';
    ctx.fillText('3', x_C3 - 48, y_C3_plates_top + plate_gap / 2 + 5);

    // --- Draw Title ---
    ctx.font = '20px "Songti SC", "SimSun", serif'; // Common Chinese fonts
    ctx.textAlign = 'center';
    ctx.fillText('习题 7-47 图', canvas.width / 2, 320);

</script>
</body>
</html>